<template>
	<view class="tab_head">
		<view class="tab_head-item"  v-for="(headItem,index) in headItems" :key="index">
			<view 
				:style="{color:activeIndex==index?headItem.theme:'#333','font-size':activeIndex==index?'17px':'12px'}"
			 @click="barTap(index)">{{headItem.label}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			activeIndex: {
				type: Number,
				default: 0
			},
			headItems: {
				type: Array,
				default: function() {
					return []
				}
			}
		},
		data() {
			return {
				//headItems:[{"code":"3","label":"公安专业",theme:'green'},{"code":"2","label":"执法资格",theme:'blue'}]
			}
		},
		computed: {
			// activeStyle(){
			// 	const theme =  this.headItems[this.activeIndex].theme
			// 		return {
			// 			color: theme,
			// 			borderBottom: `4upx solid ${theme}`,
			// 		}
			// }
		},
		// filters:{
		// 	activeFor(theme,isActive){
		// 		if(isActive){
		// 			return {
		// 				color: theme,
		// 				'border-bottom': `4upx solid ${theme}`,
		// 			}
		// 		}
		// 		return {}
		// 	}
		// },
		watch: {},
		methods: {
			barTap(activeIndex) {
				this.$emit('barTap', activeIndex)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.c_blue {
		color: #377cfd;
	}

	.activeO {
		height: 4upx;
		width: 100%
	}

	.tab_head {
		height: 80upx;
		background-color: #fff;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		font-size: 30upx;
		color: #333;
		padding: 10upx 40upx;
		box-shadow: 0px 4px 20px 0px rgba(153, 153, 153, 0.15);

		&-item {
			line-height: 60upx;

			&.active {
				color: #377cfd;
				border-bottom: 4upx solid #377cfd;
			}

			&:last-child {
				margin-left: 60upx;
			}
		}
	}
</style>
